<template>
  <svg
    t="1754136616296"
    class="icon"
    viewBox="0 0 1024 1024"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    p-id="12620"
    :width="size"
    :height="size"
  >
    <path
      d="M483.2 184.490667A32 32 0 0 1 501.333333 213.333333v597.333334a32 32 0 0 1-52.010666 25.002666L244.778667 672H85.333333a32 32 0 0 1-32-32V384A32 32 0 0 1 85.333333 352h159.445334l204.544-163.669333a32 32 0 0 1 33.877333-3.84zM437.333333 279.893333L276.010667 409.002667A32 32 0 0 1 256 416H117.333333v192H256a32 32 0 0 1 20.010667 6.997333l161.322666 129.066667V279.893333z m392.106667 277.333334l-128 128L656.128 640l128-128-128-128 45.226667-45.226667 128 128 128-128L1002.666667 384l-128 128 128 128-45.226667 45.226667-128-128z"
      p-id="12621"
      :fill="color"
    ></path>
  </svg>
</template>

<script>
  export default {
    name: "VolumeIcon",
    props: {
      size: {
        type: [Number, String],
        default: 24,
      },
      color: {
        type: String,
        default: "#c24242",
      },
    },
  };
</script>

<style scoped>
  .icon {
    display: inline-block;
    vertical-align: middle;
  }
</style>
